<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<link rel="stylesheet" href="css/cjd.css">
		<title>Document</title>
	</head>

	<body>
		<div id="app" class="app">
			<div class="card" v-for="item in stuData" :key="item.name">
				<div class="content">
					<div class="img">
						<img v-bind:src="item.head" alt="" />
					</div>
					<ul>
						<li>
							<p><span>姓名：{{item.name}}</span></p>
							<p><span>年龄：{{item.age}}</span></p>
							<p><span>性别：{{item.sex}}</span></p>
							<p><span>总分：{{item.yw +item.sx +item.yy }}</span></p>
						</li>
					</ul>

				</div>
				<div class="score" v-if="(item.yw >=60) & (item.sx >=60) & (item.yy >=60)">
					<div class="nav">---</div>
					<span>语文：{{item.yw}}</span>
					<span>数学：{{item.sx}}</span>
					<span>英语：{{item.yy}}</span>
				</div>
			</div>
		</div>
	</body>
	<script src="https://unpkg.com/vue@next"></script>
	<script>
		const app = {
			data() {
				return {
					stuData: [{
							head: "img/1.png",
							name: '小小',
							age: 20,
							sex: '男',
							yw:80,
							sx:100,
							yy:70,
						},
						{
							head: "img/2.png",
							name: '大大',
							age: 20,
							sex: '男',
							yw:70,
							sx:100,
							yy:90,
						},
						{
							head: "img/3.png",
							name: '明明',
							age: 20,
							sex: '男',
							yw:70,
							sx:70,
							yy:70,
						},
					]
				}
			}
		}
		Vue.createApp(app).mount("#app")
	</script>

</html>